*{margin: 0;padding: 0}
body,html{ height:100%;}
body{overflow:hidden;}
#wrap{width:100%;height:100%;}
#wrap .part{width:100%;height:100%; position:relative;}
#wrap .part .logo{ width:215px; height:60px; background:url(img/logo.png) top left/100% 100%; position:absolute; top:20px; left:20px;}
#wrap .img1{position:absolute; transition:1.2s;}


#wrap .part1 .img1{ top:50%;margin-top:-300px; left:50%; margin-left:-315px; opacity:0;}
#wrap .part2 .img1{ top:50%;margin-top:0px; left:50%; margin-left:-315px; opacity:0; }
#wrap .part3 .img1{ top:50%;margin-top:-110px; left:-30px; opacity:0;}

#wrap .part1 .img1.on{ top:50%;margin-top:-120px; left:50%; margin-left:-315px; opacity:1; }
#wrap .part2 .img1.on{ top:50%;margin-top:-225px; left:50%; margin-left:-315px; opacity:1; }
#wrap .part3 .img1.on{ top:50%;margin-top:-110px; left:100px; opacity:1;}


#wrap .part img{display:block;}
#slide{width:20px;height:160px;position:fixed;top:50%;margin-top:-80px;left:30px;}
#slide ul li{ width:16px;height:16px;border:2px solid #fff; margin:3px 0;border-radius:100%;list-style:none;cursor:pointer;}
#slide ul li.on{ background:#fff;}